<!-- Created by mhy on 2018/6/27.

 -->
<template>
<div class="frame-index">
    <button class="addBtn" @click="addfactory">+ 新建厂家</button>
    <div class="frame-content">
      <div class="frame-left">
        <form class="frame-left-search" action="#">
          <input class="frame-search-input"
            type="text"
            v-model="searchStr"
            placeholder="搜索 厂家ID/名称"
            @keydown.enter="searchData">
        </form>
        <div class="frame-left-dist"></div>
      </div>
      <div class="frame-right">
        <div class="frame-right-header">
          <p class="frame-right-title">搜索</p>
          <div class="frame-right-search" v-if="searchStr2">
            <p class="frame-right-search-title">{{searchStr2}}</p>
            <img class="" src="../../../static/deleteWord.png" @click="research">
          </div>
          <p class="frame-right-search-content" v-for="(item,index) in searchList" :key="index">{{item}}</p>
          <p class="frame-right-allitems">共{{factoryList.total}}张</p>
        </div>
        <div class="frame-right-dist"></div>
        <div class="frame-right-list">
          <template v-for="(item, key) in factoryList.list">
            <Factory-item :key="key" @click.native="showDetail(item)" :item="item"/>
          </template>
        </div>

        <div class="frame-right-dist-1"></div>

        <div class="frame-right-footer">
          <p class="frame-right-footer-txt" @click="addPage">上一页</p>
          <p class="frame-right-footer-txt">{{page}} / {{Math.ceil(factoryList.total / 50)}}</p>
          <p class="frame-right-footer-txt" @click="minusPage">下一页</p>
          <input class="frame-right-page-input" v-model.number="pageT" type="number">
          <p class="frame-right-footer-search" @click="toPage(pageT)">跳转</p>
        </div>

        <!-- <div class="frame-right-line" style="margin-top: 200px; border-width: 2px;"></div>
        <div class="frame-right-footer">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="factoryList.page"
            :page-size="50"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :total="factoryList.total">
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {mapActions,mapState} from 'vuex'
    export default {
      data() {
        return{
          searchList:[],
          searchStr: '',
          searchStr2: '',
          page: 1,
          pageT: '',
        }
      },
      components:{

      },
      beforeRouteEnter(to, from, next) {
        next( (self) => {
          self.loadDataList(1)
          self.$store.state.navTitle = '厂家列表';
        })
      },
      methods: {
        ...mapActions([
            'getFrameList',
            'getFactoryList'
        ]),
        research () {
          this.searchStr = ''
          this.searchData()
        },
        addPage () {
          this.pageT = ''
          if (this.page <= 1) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          }
          this.loadDataList(--this.page)
        },
        minusPage () {
          this.pageT = ''
          if (this.page >= Math.ceil(this.factoryList.total / 50)) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          }
          this.loadDataList(++this.page)
        },
        toPage (page) {
          if (page < 1) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          } else if (page > Math.ceil(this.factoryList.total / 50)) {
            return this.$dialog.toast({mes: '页码不存在', timeout: 1000})
          }
          this.loadDataList(page)
        },
        searchData (e) {
          this.searchStr2 = this.searchStr
          this.page = 1
          this.pageT = ''
          this.getFactoryList({
            search: this.searchStr2,
            page: 1
          })
          e.preventDefault()
        },
        loadDataList (page) {
          this.page = page
          this.$dialog.loading.open('很快加载好了')
          this.getFactoryList({
            search: this.searchStr2,
            page
          })
          .finally(() => {
            this.$dialog.loading.close()
          })
        },
        showDetail (item) {
          this.$router.push({
            path: '/factory/detail',
            query: {
              id: item.id
            }
          })
        },
        addfactory () {
          this.$router.push('/new/factory')
        }
      },
      computed: {
        ...mapState({
          factoryList: state => state.factory.factoryList
        })
      },
      mounted () {
        this.$store.state.navTitle = '厂家列表'
        this.$dialog.loading.open('很快加载好了')
        this.getFactoryList({page: 1})
        .finally(() => {
          this.$dialog.loading.close()
        })
      }
    }
</script>

<style scoped>

    .frame-right-dist-1{
        width: 90%;
        height: 2px;
        margin-top: 2px;
        background-color: #C8C8C9;
    }
    input{
      background-color: white;
    }
   .frame-index{
      position: relative;
      width: 100%; overflow: hidden;
      background:#F2F2F2;
    }

    .frame-right-line{
      width: 90%;
      height: 2px; background-color: #979797;
      margin: 200px auto 50px auto;
    }
  /*顶部*/
  .frame-header{
    width: 100%;
    height: 35px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
  .frame-logo{
    width: 15px;
    height: 15px;
    margin-left: 3%;
  }
  .frame-new{
    border: 0;
    background-color: #39B866;
    width: 60px;
    height: 19px;
    border-radius: 3px;
    color: white;
    font-size: 6px;
    -webkit-text-size-adjust:none;
    margin-right: 10px;
    outline: none;
  }

  /*内容*/
  .frame-content{
    width:100%;
    display: flex;
    display: -webkit-flex;
  }
  /*左边*/
  .frame-left{
    width: 25%;
    min-width: 350px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .frame-left-search{
    width: 80%;
    height: 40px;
    margin-top: 70px;
  }
  .frame-search-input{
    width: 100%;
    height: 100%;
    border-width: 0;
    border-radius: 50px;
    border-width: 0.2px;
    border-color: #C8C8C8;
    outline:none;
    padding: 10px;
  }
  input::-ms-input-placeholder{
    text-align: center;
  }
  input::-webkit-input-placeholder{
    text-align: center;
  }
  .frame-left-dist{
    width: 80%;
    background-color: #C8C8C9;
    height: 1px;
    margin-top: 42px;
    margin-bottom: 30px;
  }

  .frame-left-category{
    margin:5px;
    width: 80%;
    height: 25px;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1px;
    border-color: #C8C8C8;
  }
  .category-title{
    margin-left: 10px;
    font-size: 7px;
    color: #303641;
  }
  .category-value{
    margin-right: 10px;
    font-size: 7px;
  }


  /*右边*/
  .frame-right{
    width: 75%;
    min-width: 850px;
    margin-top: 70px;
    background-color: white;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .frame-right-dist{
    width: 90%;
    height: 0.5px;
    background-color: #979797;
  }
  .frame-right-header{
    height:80px;
    width: 90%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: row;
  }
  .frame-right-title{
    font-size: 6px;
    color: #303641;
  }
  .frame-right-search{
    min-width: 100px;
    height: 30px;
    border-radius: 50px;
    border:1pt solid #C8C7CC;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 10px;
  }
  .frame-right-search-title{
    font-size: 6px;
    color: #303641;
    margin-right: 10px;
  }
  .frame-right-search-content{
    font-size: 6px;
    margin-left: 10px;
    color: #303641;
  }
  .frame-right-allitems{
    font-size: 6px;
    margin-left: auto;
  }
  .frame-right-list{
    width: 90%;
    margin-top: 32px;
  }
  .frame-right-footer{
    width: 90%;
    height: 100px;
    /*margin-bottom: 100px;*/
    /*margin-top: 20px;*/
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .frame-right-footer-txt{
    font-size: 7pt;
    color: #303641;
    margin-right: 10pt;
  }
  .frame-right-page-input{
    width: 80px;
    height:26px;
    line-height: 26px;
    outline: none;
    margin-right: 10pt;
  }
  .frame-right-footer-search{
    width: 50px;
    height:26px;
    line-height: 26px;
    font-size: 6pt;
    border: 1px solid #C8C8C8;
  }

  .m-mb-10{
    margin-bottom: 10px;
  }

  .addBtn{
    position: absolute;
    top: 17px; right: 20px;
    width:100px; cursor: pointer;
    height:37px;
    background:rgba(57,184,102,1);
    border-radius:5px;
    color: #fff;
}
</style>
